<!--
 * @Author: your name
 * @Date: 2021-12-25 16:26:38
 * @LastEditTime: 2021-12-30 09:16:03
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \order-ui\src\pages\order\goods\List.vue
-->
<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年12月20日 15:03:19
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="foodManage">
    <!-- 头部 -->
    <!-- 新增 -->

    <div class="header">
      <el-button type="primary" @click="addProduct">新增</el-button>

      <!-- 下拉选择框 -->
      <el-select v-model="selectId" clearable placeholder="请选择">
        <el-option
          v-for="item in ProCategory.list"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <!-- 搜索按钮 -->
      <el-button icon="el-icon-search" @click="serchProductData"
        >搜索</el-button
      >
    </div>
    <div class="tableContent">
      <!-- 表格 -->
      <el-table
        :data="productData.list"
        style="width: 100%"
        v-loading="loading"
      >
        <!-- 菜品图片 -->
        <el-table-column label="菜品图片" width="180" align="center">
          <!-- 大图预览 -->
          <template slot-scope="scope">
            <el-image
              @load="imgFinish"
              style="height: 100px"
              :src="scope.row.photo"
              :preview-src-list="[scope.row.photo]"
            >
              <div slot="placeholder" class="image-slot">
                <i style="font-size: 100px" class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <!-- 图片未加载 -->
          </template>
        </el-table-column>

        <!-- 名称 -->
        <el-table-column label="名称" width="140" align="center">
          <template slot-scope="scope">
            <!-- 名称 -->
            <div>{{ scope.row.name }}</div>
            <!-- 价格 -->
            <div>
              <span style="color: red; font-size: 18px"
                >{{ scope.row.price }}元</span
              >/{{ scope.row.unit }}
            </div>
          </template>
        </el-table-column>
        <!-- 销量 -->
        <el-table-column prop="date" label="销量" width="140" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.sales == null">暂无</div>
            <div v-else>{{ scope.row.sales }}</div>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column
          prop="status"
          label="状态"
          width="200px"
          align="center"
        >
          <!-- 标签 -->
          <template slot-scope="scope">
            <div>
              <el-switch
                v-if="scope.row.status == '正常'"
                v-model="value1"
                style="display: block"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="上架中.."
                inactive-text="下架了"
                disabled
              >
              </el-switch>
              <el-switch
                v-else
                style="display: block"
                active-color="#13ce66"
                inactive-color="#ff4949"
                v-model="value2"
                active-text="上架中"
                inactive-text="下架了"
                disabled
              >
              </el-switch>
              <!-- <el-tag v-if="scope.row.status == '正常'" type="success"
                  >上架商品</el-tag
                >
                <el-tag v-else type="danger">下架商品</el-tag> -->
            </div>
          </template>
        </el-table-column>
        <!-- 介绍 -->
        <el-table-column prop="description" label="介绍" align="center">
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" width="140" align="center">
          <!-- 上架 下架 删除 -->
          <template slot-scope="scope">
            <el-button
              icon="el-icon-upload2"
              v-if="scope.row.status == '下架'"
              type="text"
              size="small"
              @click="onLineClick(scope.row.id)"
              >上架</el-button
            >
            <el-button
              icon="el-icon-download"
              v-else
              type="text"
              size="small"
              @click="offLineClick(scope.row.id)"
              >下架</el-button
            >
            <el-button
              icon="el-icon-edit"
              type="text"
              size="small"
              @click="editProduct(scope.row)"
              >修改</el-button
            >
            <el-button
              icon="el-icon-delete"
              type="text"
              size="small"
              @click="delLineClick(scope.row.id)"
              style="color: red"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="[5, 7, 10, 12]"
      :page-size="pageSize"
      layout="sizes, prev, pager, next"
      :total="productData.total">
    </el-pagination>
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[5, 7, 10, 15]"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="productData.total"
      >
      </el-pagination> -->
    </div>
    <!-- 模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      v-if="dialogVisible"
    >
      <!-- 表单开始 -->
      <!-- model="productForm" 传递的参数 -->
      <el-form
        :model="productForm"
        :rules="rules"
        ref="productForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 表单项 -->
        <!-- 名称 -->
        <el-form-item label="名称" prop="name">
          <el-input v-model="productForm.name"></el-input>
        </el-form-item>
        <!-- 单价 -->
        <el-form-item label="单价" prop="price">
          <el-input v-model="productForm.price"></el-input>
        </el-form-item>
        <!-- 规格 -->
        <el-form-item label="规格" prop="unit">
          <el-input v-model="productForm.unit"></el-input>
        </el-form-item>
        <!-- 所属菜单 -->
        <el-form-item label="所属菜单" prop="productCategoryId">
          <el-select
            v-model="productForm.productCategoryId"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in ProCategory.list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option> </el-select
        ></el-form-item>
        <!-- 介绍 -->
        <el-form-item label="商品介绍" prop="description">
          <el-input
            type="textarea"
            v-model="productForm.description"
          ></el-input>
        </el-form-item>
        <!-- 上传图片 -->
        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <!-- 预览图片 -->
            <img
              style="height: 150px"
              v-if="imageUrl"
              :src="imageUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- -->
      <!--表单结束  -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitProductForm('productForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { log } from "@antv/g2plot/lib/utils";
import { mapActions, mapState } from "vuex";
// 引入请求方法
import { get, post } from "@/utils/request";
import { uint8array } from "jszip/lib/support";
import { title } from "@/settings";
// 引用vex的辅助函数
export default {
  // 组件名称
  name: "Demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      // 状态
      value2: false,
      value1: true,
      // 文件预览路径
      showFileURL: "http://121.199.29.84:8888/group1/",
      // 本地基础路径
      uploadFileURL: "http://121.199.29.84:8001/file/upload",
      // 图片上传接口
      imageUrl: "",
      // 表单对象 传递的参数
      productForm: {
        // 名称
        name: "",
        // 单价
        price: "",
        // 参数
        uint: "",
        // 菜单
        productCategoryId: "",
        // 介绍
        description: "",
      },
      rules: {
        name: [{ required: true, message: "请输入菜品名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        unit: [{ required: true, message: "请输入规格参数", trigger: "blur" }],
        productCategoryId: [
          { required: true, message: "请选择所属菜单", trigger: "change" },
        ],
        description: [
          { required: true, message: "请输入产品介绍", trigger: "blur" },
        ],
      },
      // 模态框的标题
      dialogTitle: "",

      // 控制模块框的显示与隐藏
      dialogVisible: false,
      loading: false,
      // 测试数据
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      selectId: "",
      // 当前页-分页使用
      page: 1,
      // 每页展示的数条数
      pageSize: 10,
    };
  },
  // 侦听器
  watch: {},
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {},
  // 生命周期函数在页面加载是自动执行
  created() {
    this.getProductData();
    this.getProCategoryData();
  },
  // 组件方法
  methods: {
    // 图片上传成功
    handleAvatarSuccess(res, file) {
      // 生成一个图片路径能预览
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res);
      this.productForm.photo = this.showFileURL + res.data.id;
    },
    // 图片上传之前做的处理
    beforeAvatarUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("用户上传图片大小不能超过 3MB!");
      }
    },

    submitProductForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 发送请求
          console.log(this.productForm);
          post("/product/saveOrUpdate", this.productForm).then((res) => {
            // console.log(res);
            if (res.status == 200) {
              this.$notify({
                title: "操作成功",
                message: "",
                type: "success",
              });
              // 刷新页面数据
              this.getProductData();
              this.loading = false;
              // 关闭模块框
              this.dialogVisible = false;
            } else {
              this.$notify({
                title: "失败",
                message: "res.message",
                type: "danger",
              });
            }
          });
        } else {
          return false;
        }
      });
    },

    // 关闭提示框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$refs["productForm"].resetFields();
          this.dialogVisible = false;
          //      resetForm(productForm) {
          //   this.$refs[productForm].resetFields();
          // }
          done();
        })
        .catch((_) => {});
    },
    // 2...mapActions('模块名称',{getProductDataVuex})
    ...mapActions("product", ["getProductDataVuex", "getProCategoryDataVuex"]),
    // 新增数据
    addProduct() {
      // 修改模块框标题
      this.dialogTitle = "新增产品信息";
      // 弹出模块框
      this.dialogVisible = true;
      // 清空表单数据
      this.productForm = {};
      // 清空图片
      this.imageUrl = "";
    },
    // 修改数据
    editProduct(proObj) {
      // 表单对象=当前行
      this.productForm = { ...proObj };
      // 对图片赋值
      this.imageUrl = this.productForm.photo;
      // 修改模块框标题
      this.dialogTitle = "修改产品信息";
      // 弹出模块框
      this.dialogVisible = true;
    },
    // 更新size页大小
    handleSizeChange(sizePage){
      this.pageSize=sizePage;
      this.getProductData();
      console.log("每页大小:"+sizePage);
    },
    handleCurrentChange(currentPage) {
      // 获取当前页码更新this
      this.page = currentPage;
      this.getProductData();
      // console.log("当前页数"+currentPage);
    },
    // 分页获取所有产品数据
    getProductData() {
      // 设置参数
      let param = {
        page: this.page,
        pageSize: this.pageSize,
        productCategoryId: this.selectId,
      };
      this.loading = false;
      // 3.调用vuex方法
      this.getProductDataVuex(param);
      // console.log(this.loading);
    },
    // 分页查询所有分类产品
    // 分页获取所有产品数据
    getProCategoryData() {
      // 设置参数
      let param = {
        page: this.page,
        pageSize: this.pageSize,
      };
      this.loading = false;
      // 调用vuex方法
      this.getProCategoryDataVuex(param);
      // console.log(this.loading);
    },
    //查询页面满足页面的数据
    serchProductData() {
      // 重置页面为1
      (this.page = 1), this.getProductData();
    },
    imgFinish() {
      this.loading = false;
    },
    // 上架操作
    onLineClick(productId) {
      // console.log(productId);
      // 发送请求上架该产品
      get("/product/online", { id: productId }).then((res) => {
        console.log(res,'上架');
        if (res.message == "上架成功") {
          this.$message({
            message: "上架成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "失败了",
            type: "warning",
          });
        }
        this.getProductData();
      });
    },
    // 下架
    offLineClick(productId) {
      console.log(productId);
      // 发送请求上架该产品
      get("/product/offline", { id: productId }).then((res) => {
        if (res.message == "下架成功") {
          this.$message({
            message: "下架成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "失败了",
            type: "warning",
          });
        }
        this.getProductData();
      });
    },
    // 删除
    delLineClick(productId) {
      // console.log(productId);
      // 发送请求上架该产品
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        get("/product/deleteById", { id: productId }).then((res) => {
          console.log(res);
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getProductData();
        });
      });
    },
  },
  // 计算数据
  computed: {
    // Action1.声明辅助函数获取state中的值
    ...mapState("product", ["productData", "ProCategory"]),
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
/* 设置整体样式 */
.foodManage {
  /* 设置最小高度  vh视窗高度*/
  min-height: calc(100vh-100px);
  /* background-color: brown; */
}
.tableContent {
  margin-top: 10px;
  max-height: 550px;
  overflow: auto;
}
/* 表头 */
/* 设置分页区域css */
.pagination {
  position: fixed;
  right: 10px;
  bottom: 20px;
}
.caidan {
  position: relative;
  height: 100px;
  width: 500px;
  background-color: aqua;
  top: 90px;
  left: 40px;
}
.xiangpian {
  position: absolute;
  left: 50%;
  /* margin-left: 50%; */
}
/* 上传图片样式 */
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style>
